<template>
  <div class="upload-box">
    <h1 class="title1">书签去重</h1>
    <div>
      <el-button type="primary" icon="Search" @click="getRepeatBookmarks" :loading="loading">开始检测重复书签</el-button>
      <el-button type="danger" icon="Delete" :disabled="selectData.length == 0" @click="delRows">批量删除</el-button>
    </div>
    <div class="df">
      <el-row>
        <el-col :span="6">
          <el-statistic title="总书签数" :value="total" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="重复书签数" :value="repeatTotal"> </el-statistic>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table :data="repeat_bookmarks_list" show-overflow-tooltip @select="select" @select-all="select" max-height="750px" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="url" label="URL"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { mAxios, encodeURL } from "~/utils/axios/axios.js";
import { ElMessage, ElMessageBox } from "element-plus";
const loading = ref(false)
const total = ref('待检测')
const repeatTotal = ref('待检测')
const repeat_bookmarks_list = ref([])
const getRepeatBookmarks = () => {
  // const params = {
  //   page: currentPage.value,
  //   size: pageSize.value,
  // }
  loading.value = true
  mAxios.get(`bookmarks/repeat`).then(res => {
    loading.value = false
    repeat_bookmarks_list.value = res.data.data.repeatBookMarks
    total.value = res.data.data.total
    repeatTotal.value = res.data.data.repeatTotal
  })
}
const selectData = ref([])
const select = (data) => {
  selectData.value = data
}
const delRows = () => {
  const ids = selectData.value.map(item => {
    return item.id
  })
  ElMessageBox.confirm("您确定要删除选中书签？", "删除书签", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
    type: "warning",
  }).then(() => {
    mAxios.delete("bookmarks", { data: ids }).then((res) => {
      res.data.succeed
        ? ElMessage.success("删除成功")
        : ElMessage.error("删除失败");
        getRepeatBookmarks();
    });
  });
}
</script>

<style lang="scss" scoped>
.upload-box {
  width: 100%;
}
.df {
  background: #fff;
  padding: 20px;
  margin: 15px 0;
}
.title1 {
  margin-bottom: 25px;
  font-size: 17px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
</style>
